<template>
    <div :style="styleColor" class="number">
        <div class="title">海关注册备案企业</div>
        <!-- <div class="title">{{$store.state.homeStatus.customName}}</div> -->
        <div class="count">
            <div class="num">{{importNum}} <span class="jia">家</span></div>
            <!-- <div class="jia">家</div> -->
        </div>
    </div>
</template>

<script>
import { reqFindCommodityNum } from '@/api/home/index.js'
import { mapGetters } from 'vuex'
export default {
    props: {    //仿照超链，props项保留
        value: Object,
        ispreview: Boolean
    },
    data() {
        return {
            options: {},
            importNum:0
        }
    },

   
    computed: {
        ...mapGetters(['customCode']),
        transStyle() {
            return this.objToOne(this.options);
        },
        styleColor() {
            return {
                position: this.ispreview ? "absolute" : "static",

                width: this.transStyle.width + "px",
                height: this.transStyle.height + "px",
                left: this.transStyle.left + "px",
                top: this.transStyle.top + "px",
                // right: this.transStyle.right + "px"

            }
        },
        
    },
    mounted() {
        this.options = this.value;

    },
    watch:{
        customCode(val){
            // console.log(val);
            this.getNum(val)

       }
    },
    created() {
       
        // console.log(this.customCode);
        // console.log(this.$store.state.homeStatus.customCode);
        if (this.customCode == '' || !this.customCode) {
            // 默认22 上海海关
            this.getNum('22')
        }else {
            // 有数据就用store里面的数据
            this.getNum(this.customCode)
        }
       
    },
    methods:{
        async getNum(code){
            
            
            const res=await reqFindCommodityNum({customsCode:code,coClass:''})
            if (!res.data || !res.data.num) {
                this.importNum = 0
            } else {
                this.importNum = res.data.num
            }
          
            // console.log(res);

        }
    }
}
</script>

<style scoped lang="scss">
.number {
    background: url('../../../../../../assets/images/bigViewIMG/jinCompany.png') no-repeat;
    background-size: 100% 100%;
    color: #fff;
    .title {
        position: absolute;
        top: 83px;
        left: 105px;
        width: 120px;
        height: 24px;
        font-size: 15px;
    }
    .count {
        position: absolute;
        top: 38px;
        left: 80px;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        .num {
            font-size: 26px;
            color: #00ffff;
            width: 120px;
            height: 37px;
            display: flex;
            justify-content: flex-end;
           
            .jia {
                color: #fff;
                margin-left: 5px;
                font-size: 18px;
                width: 20px;
                height: 30px;
                display: flex;
                align-items: flex-end;
            }
        }
       
    }
}
</style>